<template>
    <view class="plateDe" :style="{ '--color': color }">
        <titleBox title="服务内容"></titleBox>
        <view class="serveList">
            <view class="product">
                <image :src="headImg" mode="aspectFill" class="product_img"></image>
            </view>
            <view class="product_content">
                <view class="d-flex f-column">
                    <text class="ellipsis title size30">商品或服务名1</text>
                    <text class="ellipsis Abstract size28 m-top8">摘要摘要摘要摘要摘要摘要摘要</text>
                </view>
                <view class="row j-sb a-center">
                    <text class="price size28 m-top8">￥399.99</text>
                    <view class="look a-self-end">查看详情</view>
                </view>
            </view>
        </view>
        <view class="Share">分享好友</view>
    </view>
</template>

<script>
    import { mapState } from 'vuex'
    import titleBox from '@/subCard/components/titleBox.vue'
    export default {
        components: {
            titleBox
        },
        data() {
            return {
                headImg: 'https://msraimgcdn.mogoie.com/6099/1709797684310.JPG'
            }
        },
        methods: {},
        computed: {
            ...mapState(['color'])
        }
    }
</script>

<style lang="scss" scoped>
    .plateDe {
        width: 690rpx;
        margin: 0 auto;
        background-color: #ffffff;
        padding: 20rpx;
        border-radius: 10rpx;
    }
    .serveList {
        width: 100%;
        padding: 20rpx 0;
        display: flex;
        position: relative;
    }
    .product {
        width: 170rpx;
        height: 170rpx;
        border: 1rpx solid #f7f7f7;
        border-radius: 10rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        position: relative;
        &-img {
            width: 100%;
            height: 100%;
        }
        .serial {
            background-color: var(--color);
            padding: 2rpx 20rpx;
            color: #ffffff;
            font-size: 22rpx;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10;
            border-radius: 0 0 10rpx 0;
        }
    }
    .product_content {
        flex: 1;
        height: 180rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 24rpx;
    }

    .look {
        width: 160rpx;
        height: 60rpx;
        border: 1rpx solid #f2f2f2;
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--color);
        font-size: 24rpx;
        border-radius: 30rpx;
    }
    .title {
        color: #000;
    }
    .Abstract {
        color: #333333;
    }
    .price {
        color: #990000;
    }
    .Share {
        width: 340rpx;
        height: 76rpx;
        border: 1rpx solid var(--color);
        margin: 10rpx auto;
        border-radius: 10rpx;
        color: var(--color);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 32rpx;
    }
</style>
